<template>
  <div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
    <el-form style="margin-left: -40px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="字段：" prop="key">
        <el-select v-model="ruleForm.key" style="width: 160px;float: left" placeholder="请选择字段">
          <el-option label="楼宇" value="buildingName"></el-option>
          <el-option label="宿舍" value="dormitoryName"></el-option>
        </el-select>
      </el-form-item>
      <div style="border: 0px solid red;width: 400px;height: 60px;position: relative;top: -64px;left: 270px">
        <el-form-item label="值：">
          <el-input v-model="ruleForm.value" placeholder="请输入关键字" style="width: 160px;"></el-input>
          <el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;" @click="submitForm('ruleForm')">搜索</el-button>
        </el-form-item>
      </div>
    </el-form>

    <div style="margin-top: -80px; margin-bottom: 40px; text-align: left;">
      <ScoreLegend />
    </div>

    <el-table
        :cell-style="cellColorCalc"
        :data="tableData"
        border
        stripe
        style="width: 1210px;position: relative;top:-30px">
      <el-table-column
          fixed
          prop="id"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="buildingName"
          label="楼宇">
      </el-table-column>
      <el-table-column
          prop="dormitoryName"
          label="宿舍">
      </el-table-column>
      <el-table-column
          prop="score"
          label="分数">
      </el-table-column>
      <el-table-column
          prop="reason"
          label="原因">
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期">
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px;float: right"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   :current-page.sync="currentPage"
                   @current-change="page">
    </el-pagination>
  </div>

</template>

<script>
import ScoreLegend from "@/components/ScoreLegend.vue";

export default {
  components: {
    ScoreLegend
  },
  data() {
    return {
      tableData: null,
      currentPage: 1,
      pageSize: 3,
      total: null,
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 3
      },
      rules: {
        key: [
          { required: true, message: '请选择字段', trigger: 'change' }
        ]
      },
      startColor: {r: 0, g: 122, b: 204},
      endColor: {r: 255,g: 40,b: 40}
    }
  },
  methods:{
    submitForm(formName) {
      const _this = this
      //让翻页复原
      _this.currentPage=1
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          _this.ruleForm.page = _this.currentPage
          axios.get('http://localhost:8181/clean/search',{params:_this.ruleForm}).then(function (resp) {
            _this.tableData = resp.data.data.data
            _this.total = resp.data.data.total
          })
        }
      });

    },
    page(currentPage){
      const _this = this
      if(_this.ruleForm.value == ''){
        axios.get('http://localhost:8181/clean/list/'+currentPage+'/'+_this.pageSize).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      } else {
        _this.ruleForm.page = _this.currentPage
        axios.get('http://localhost:8181/clean/search',{params:_this.ruleForm}).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      }

    },
    cellColorCalc({row, column}) {
      // console.log(row,column)
      if (column.label === '分数') {
        // console.log("score", row.score)
        const color = this.calcBgColor(row.score);
        // 背景变色
        return { background: color, color: '#FFF' }
        // 字体变色
        // return { color: color }
      }
    },
    calcBgColor(value) {
      const p = value / 100;
      let r, g, b;
      // 大于50
      if (p >= 0.5) {
        r = Math.floor(255 * (1 - p) * 2);
        g = 200;
        b = 0;
      } else {
        r = 200;
        g = Math.floor(255 * (p - 0.5) * 2);
        b = 0;
      }
      return `rgb(${r} ,${g} ,${b})`;
    }
  },
  created() {
    const _this = this
    axios.get('http://localhost:8181/clean/list/1/'+_this.pageSize).then(function (resp) {
      _this.tableData = resp.data.data.data
      _this.total = resp.data.data.total
      console.log(resp.data.data)
    })
  }
}
</script>
